<template>
  <div class="topPadding">
    <el-tabs class="tabBar" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="业绩管理" name="first">
        <!-- 点击按钮栏 -->
        <div class="btnList">
          <el-radio-group v-model="radio1" @change="touchBtn">
            <el-radio-button label="1">分销订单</el-radio-button>
            <el-radio-button label="2">分销员业绩</el-radio-button>
            <el-radio-button label="3">分销方案</el-radio-button>
          </el-radio-group>
        </div>
        <Order v-if="radio1 === '1' && activeName === 'first'" />
        <Humens v-if="radio1 === '2' && activeName === 'first'" />
        <Programme v-if="radio1 === '3' && activeName === 'first'" />
      </el-tab-pane>
      <el-tab-pane label="分销员" name="second">
        <!-- 点击按钮栏 -->
        <div class="btnList">
          <el-radio-group v-model="radio2" @change="touchBtns">
            <el-radio-button label="1">分销员列表</el-radio-button>
            <el-radio-button label="2">待审核信息</el-radio-button>
            <el-radio-button label="3">招募设置</el-radio-button>
          </el-radio-group>
        </div>
        <List v-if="radio2 === '1' && activeName === 'second'" />
        <Msg v-if="radio2 === '2' && activeName === 'second'" />
        <Sys v-if="radio2 === '3' && activeName === 'second'" />
      </el-tab-pane>
      <el-tab-pane label="客户关系" name="third">
        <div class="btnList">
          <el-radio-group v-model="radio3" @change="touchBtn3">
            <el-radio-button label="1">关系查询</el-radio-button>
            <el-radio-button label="2">关系设置</el-radio-button>
          </el-radio-group>
        </div>
        <PopSearch v-if="radio3 === '1' && activeName === 'third'" />
        <PopSys v-if="radio3 === '2' && activeName === 'third'" />
      </el-tab-pane>
      <!--<el-tab-pane label="推广设置" name="fourth">
          <div class="btnList">
            <el-radio-group v-model="radio4" @change="touchBtn4">
              <el-radio-button label="1">推广店铺</el-radio-button>
              <el-radio-button label="2">邀请下级</el-radio-button>
            </el-radio-group>
          </div>
          <ShopTen v-if="radio4 ==='1' && activeName === 'fourth'" />
          <Invite v-if="radio4 === '2' && activeName === 'fourth'" />
        </el-tab-pane>-->
    </el-tabs>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Order from './achievement/order.vue'
import Humens from './achievement/humens.vue'
import Programme from './achievement/programme.vue'
import List from './personnel/list.vue'
import Msg from './personnel/msg.vue'
import Sys from './personnel/sys.vue'
import PopSearch from './customer/popSearch.vue'
import PopSys from './customer/popSys.vue'
const activeName = ref('first')
const radio1 = ref('1')
const radio2 = ref('1')
const radio3 = ref('1')
const radio4 = ref('4')

// 顶部切换
const handleClick = (tab, event) => {
  activeName.value = tab.name
  radio1.value = '1'
  radio2.value = '1'
  radio3.value = '1'
  radio4.value = '1'
}
const touchBtn = (index) => {
  radio2.value = index
}
const touchBtns = (index) => {
  radio2.value = index
}
const touchBtn3 = (index) => {
  radio3.value = index
}
const touchBtn4 = (index) => {
  radio4.value = index
}
</script>

<style lang="scss" scope>
.topPadding {
  padding: 20px;
  margin-top: 20px;
  background-color: #FFFFFF;
}
.tabBar {
  .el-radio-button__inner {
    height: 38px;
    line-height: 1.5;
  }
}
.btnList {
  margin-bottom: 20px;
}
.seacherBox {
  padding-top: 30px;
}
</style>
